<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
// import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getStoreOrder } from '#/api';

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    { component: 'Input', componentProps: { placeholder: '请输入订单编号，支持模糊匹配' }, fieldName: 'orderSn', label: '订单编号' },
    { component: 'Input', componentProps: { placeholder: '请输入用户手机号，支持模糊匹配' }, fieldName: 'userPhone', label: '用户手机号' },
    { 
      component: 'Select', 
      componentProps: { 
        allowClear: true, 
        options: [
          { label: '待支付', value: '0' }, 
          { label: '已支付-服务未开始', value: '1' },
          { label: '服务中', value: '2' },
          { label: '服务完成', value: '3' },
          { label: '用户取消支付', value: '4' },
          { label: '用户退款', value: '5' }
        ], 
        placeholder: '请选择' 
      }, 
      fieldName: 'orderStatus',
      label: '订单状态' 
    },
    { 
      component: 'Select', 
      componentProps: { 
        allowClear: true, 
        options: [
          { label: '到店', value: '1' }, 
          { label: '上门', value: '2' }], 
        placeholder: '请选择' 
      }, 
      fieldName: 'serviceType',
      label: '到店/上门' 
    },
    { 
      component: 'RangePicker', 
      fieldName: 'rangePicker', 
      label: '范围选择器' 
    }
  ],
  
  showCollapseButton: true,                   // 控制表单是否显示折叠按钮
  submitButtonOptions: { content: '查询' },
  submitOnChange: false,                      // 是否在字段值改变时提交表单
  submitOnEnter: false                        // 按下回车时是否提交表单
};

interface RowType {
  id: number;               // 主键自增id
  orderSn: string;           // 订单号
  orderStatus: number;       // 订单状态 (0=待支付, 1=已支付-服务未开始, 2=服务中, 3=服务完成, 4=用户取消支付, 5=用户退款)
  userId: number;            // 用户ID
  userName: string;         // 用户名字
  userPhone: string;        // 用户电话
  userAddress: string;      // 用户收货地址
  totalAmount: number;       // 订单总金额 (Java是BigDecimal，TS里用number)
  serviceType: number;       // 服务类型 (1=到店服务, 2=顺丰上门)
  storeId: number;           // 商店ID
  clothesPic: string;       // 衣物图片 (可选)
  comment: string;          // 用户留言备注 (可选)
  updateTime: string;       // 修改时间
  createTime: string;       // 创建时间 (同上)
}
const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: { highlight: true, labelField: 'name' },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { title: '选择', type: 'checkbox', width: 100 },
    { field: 'orderSn', title: '订单号' },
    { field: 'orderStatus', title: '订单状态' },
    { field: 'userId', title: '用户ID' },
    { field: 'userName', title: '用户姓名' },
    { field: 'userPhone', title: '联系电话' },
    { field: 'userAddress', title: '收货地址' },
    { field: 'totalAmount', title: '订单金额' },
    { field: 'serviceType', title: '服务类型' },
    { field: 'storeId', title: '店铺ID' },
    { field: 'clothesPic', title: '衣物照片' },
    { field: 'comment', title: '用户备注' },
    { field: 'createTime', title: '创建时间' },
    { field: 'updateTime', title: '更新时间' }
  ],
  keepSource: true,
  pagerConfig: {
    pageSize: 10,
    pageSizes: [10, 20, 50, 100],
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        // message.success(`Query params: ${JSON.stringify(formValues)}`);
        const res = await getStoreOrder({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        console.log('====', res);
        if (res.records != null) {
          res.records.forEach((item: { num: any; }, index: number) => {
            item.num = page.pageSize * (page.currentPage - 1) + index + 1;
          });
          return {
            total: res.total,
            items: res.records,
          };
        }
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <div class="vp-raw w-full">
    <Grid />
  </div>
</template>
